<template>
  <div id="productWarehousing"></div>
</template>

<script>
import * as echarts from "echarts";
export default {
  name: "productWarehousing",
  props: {
    currentMonthData: {
      type: Array,
      default: []
    },
    monthCountData:{
      type: Array,
      default: []
    }
  },
  watch:{
    currentMonthData:{
      handler: function(newVal, oldVal) {
        if(newVal){

        }
      }
    }
  },
  data() {
    return {
      chartDom: null,
      myChart: null,
      option: null,
    };
  },
  methods: {
    async getData() {
      this.option = {
        // grid: {
        //   top: 30,
        //   left: 30, // 将left属性值调整为30
        //   bottom: 30,
        //   containLabel: false,
        // },
        xAxis: {
          type: "category",
          name: "月份",
          nameTextStyle: {
            color: "#fff",
          },
          axisLabel: { show: true, color: "#fff", rotate: 0 }, //显示轴的数值
          boundaryGap: false,
          // data: [1,2,3,4,5,6,7,8,9,10,11,12],
          data:this.currentMonthData
        },
        yAxis: {
          type: "value",
          name: "产量",
          nameTextStyle: {
            color: "#fff",
            padding: [0, 0, 0, -25],
          },
          splitLine: { show: false }, //显示背景线轴
          axisLine: { show: false }, //显示轴
          axisLabel: { show: true, color: "#fff" }, //显示轴的数值
          axisTick: { show: false }, //轴刻度线
        },
        series: [
          {
            smooth: true,
            data:this.monthCountData,
            type: "line",
          },
        ],
      };
    },
    async initChart() {
      this.chartDom = document.getElementById("productWarehousing");
      this.myChart = echarts.init(this.chartDom);
      this.myChart.setOption(this.option);
    },
  },
  async mounted() {
    const that = this;
    await this.getData();
    await this.initChart();
    window.addEventListener("resize", function () {
      that.myChart.resize();
    });
  },
};
</script>

<style scoped>
#productWarehousing {
  width: 100%;
  height: 100%;
}
</style>
